@tailwind base;

html {
  line-height: 1.15; /* for compatibility with tailwind 0.x */
}

a {
  color: theme('colors.blue3');
  text-decoration: underline;
}

a:hover {
  color: theme('colors.blue4');
  text-decoration: underline;
}

details summary {
  cursor: pointer;
}

details summary > * {
  display: inline-block;
}

@tailwind components;

/* custom components */

.tree {
  @apply pl-4;
}

.tree .node {
  @apply relative;
  @apply pl-8 pt-4 border-l border-gray5;
}

.tree .node::before {
  content: "";
  @apply block;
  @apply absolute left-0 top-0;

  width: calc(theme('width.8') + 1px);
  height: calc(theme('padding.4') + 1.2rem); /* 1.2 rem is arbitrary, for alignment */
  margin-left: -1px; /* make border align with parent's border */

  @apply border-b border-gray5;
}

.tree .node[data-next-status=""],
.tree[data-hide-status~="skipped"] .node[data-next-status="skipped"] {
  border-left-color: transparent;
}

.tree .node[data-next-status=""]::before,
.tree[data-hide-status~="skipped"] .node[data-next-status="skipped"]::before {
  @apply border-l;
}

.tree[data-hide-status~="skipped"] .node[data-status="skipped"] {
  display: none;
}

.tripart {
  display: grid;

  grid-template-columns: 1fr fit-content(50%) 1fr;
  grid-column-gap: theme('padding.2');
  align-items: center;
}

.tripart > *:first-child {
  justify-self: start;
}

.tripart > *:last-child {
  justify-self: end;
}

.toggle {
  position: relative;
}

.toggle > [type="checkbox"] {
  @apply opacity-0 absolute left-0 top-0;
}

.toggle > label {
  @apply pl-10 cursor-pointer;
}

.toggle > label::before {
  content: "";

  @apply w-8 h-4 rounded-full bg-gray4/50 left-0 absolute;
  @apply transition-colors duration-100;
  @apply top-1/2 -translate-y-1/2;
}

.toggle > label:hover::before {
  @apply bg-gray3/50;
}

.toggle > label::after {
  content: "";

  @apply rounded-full bg-white absolute;
  width: calc(theme('width.4') - 4px);
  height: calc(theme('width.4') - 4px);
  left: 2px;

  @apply transition-transform duration-100;
  @apply top-1/2 -translate-y-1/2;

  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 1px 1px rgba(16, 22, 26, 0.2);
}

.toggle > [type="checkbox"]:checked ~ label::before {
  @apply bg-blue3;
}

.toggle > [type="checkbox"]:checked ~ label::after {
  @apply translate-x-4;
}

.status-badge {
  @apply px-2 ml-2 text-xs text-white rounded-sm;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.status-badge.approved { @apply bg-green3; }
.status-badge.disapproved { @apply bg-red3; }
.status-badge.pending { @apply bg-orange3; }
.status-badge.skipped { @apply bg-gray3; }
.status-badge.error { @apply bg-red3; }

.status-banner {
  @apply w-full p-4 border-b shadow-sm text-white text-shadow-sm;
}
.status-banner.approved { @apply bg-green3 border-green2; }
.status-banner.disapproved { @apply bg-red3 border-red2; }
.status-banner.pending { @apply bg-orange3 border-orange2; }
.status-banner.skipped { @apply bg-gray3 border-gray2; }
.status-banner.error { @apply bg-red3 border-red2; }

.status-temporary { @apply rounded bg-red1 p-3 mt-4 inline-block }

.status-stripe {
  @apply border-l-8;
}
.status-stripe.approved { @apply border-green3; }
.status-stripe.disapproved { @apply border-red3; }
.status-stripe.pending { @apply border-orange3; }
.status-stripe.skipped { @apply border-gray3; }
.status-stripe.error { @apply border-red3; }

.hero {
  @apply p-8 bg-dark-gray5;
  background-image:
    /* from http://www.heropatterns.com/ */
    url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      hsla(0, 0%, 0%, 0.15),
      hsla(0, 0%, 0%, 0) 25%, 
      hsla(0, 0%, 100%, 0.1)
    );
}

.logo {
  background-image: url("../img/logo.svg");
  @apply w-24 h-24;
}

.list-numbers {
  @apply ml-10;

  counter-reset: index;
}

.list-numbers > li {
  counter-increment: index;
  @apply py-2;
}

.list-numbers > li:before {
  content: counter(index);
  display: inline-block;

  @apply w-8 h-8 mr-2 -ml-10 py-2;
  @apply bg-light-gray3 rounded-full;
  @apply text-center;
}

.spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  vertical-align: middle;
  aspect-ratio: 1;
}

.spinner path {
  fill-opacity: 0;
}

.spinner .spinner-track {
  stroke: rgba(95,107,124,.2);
}

.spinner .spinner-head {
  stroke: rgba(95,107,124,.8);
  stroke-linecap: round;
  transform-origin: center;
}

/* end custom components */

@tailwind utilities;

/* custom utilities */

.text-shadow-sm {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.text-shadow-none {
  text-shadow: none;
}

.drop-shadow-sm {
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
}

.bg-highlight {
  background-image: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0));
}

.text-sm-mono {
  font-size: 0.8125rem;
}

.whitespace-nowrap {
  white-space: nowrap;
}

/* end custom utilities */
